<!-- 
  工艺工时模块页面（选项卡布局）
 -->
<template>
  <div class="main-container">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>工艺路线管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品工艺库</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-form inline :model="queryProcessVersionFilters">
        <el-form-item>
          <el-input v-model="queryProcessVersionFilters.drawingNumber" class="w200" placeholder="输入图号" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="queryProcessVersion()">查询</el-button>
        <el-button @click="clear()">清空</el-button>
      </el-form>
    </div>
    <el-container>
      <el-aside width="600px">
        <div class="product-cards-panel" v-infinite-scroll="load">
          <div class="product-card" v-for="o in number" :key="o">
            <div class="card-title">
              <span
                ><b>{{ o }} - 图 号 ：</b>{{ product.drawingNumber }}</span
              >
            </div>
            <hr size="1" />
            <div class="card-content">
              <span>品 名 ：{{ product.productName }}</span>
              <br />
              <span>材 质 ：{{ product.materiaQuality }}</span>
            </div>
          </div>
        </div>
      </el-aside>
      <el-main>
        <div class="process-routes-panel">
          <el-collapse v-model="activeVersion" @change="handleChange" accordion v-if="versionList.length > 0">
            <template v-for="(item, index) in versionList">
              <el-collapse-item :name="index" :key="index" class="p10-x">
                <template slot="title">
                  <div class="justify-space-between flex w-100percent">
                    <span>&nbsp;&nbsp;版本: {{ item.versionName }}&nbsp;&nbsp;备注:{{ item.remark }} </span>
                  </div>
                  <i class="iconfont icon-xiugai1 fontSize14 pr15" @click.stop="editProcess(index)" v-if="$checkAuth('修改工艺路线')"></i>
                </template>
                <el-table :data="item.processList">
                  <el-table-column prop="sequenceNumber" label="序号" align="center" min-width="80"> </el-table-column>
                  <el-table-column prop="processName" label="工序" align="center" min-width="80"> </el-table-column>
                  <el-table-column prop="department" label="部门" align="center" min-width="60"></el-table-column>
                  <el-table-column prop="single" label="单双机" align="center" min-width="80">
                    <template slot-scope="scope">
                      <div v-if="scope.row.department == '加工'">{{ scope.row.single ? '单机' : '双机' }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="quotaHour" label="调试工时" align="center" min-width="80"></el-table-column>
                  <el-table-column prop="debugHour" label="定额工时" align="center" min-width="80"></el-table-column>
                </el-table>
              </el-collapse-item>
            </template>
          </el-collapse></div
      ></el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import _ from 'lodash'

import AddDialog from './add_process_dialog.vue'
import DeleteProcess from './process_dialog.vue'

const vuexProcess = namespace('TwoProcess')
const vuexNotice = namespace('NewNotice')
const vuexEnter = namespace('TwoEnter')
const vuexReview = namespace('TwoReview')
const vuexTool = namespace('OneTool')

@Component({
  components: {
    AddDialog,
    DeleteProcess,
    Layout
  }
})
export default class Index extends Vue {
  product: any = {
    producingId: 1,
    productName: '轴承压盖',
    drawingNumber: '70360000-01-12',
    materiaQuality: '35CrMo/42CrMo'
  }
  productList: any = [
    {
      producingId: 1,
      productName: '轴承压盖',
      drawingNumber: '70360000-01-12',
      materiaQuality: '35CrMo/42CrMo'
    },
    {
      producingId: 2,
      productName: '轴承压盖',
      drawingNumber: 'GYC25H13/GYC25H00S',
      materiaQuality: '35CrMo/42CrMo'
    },
    {
      producingId: 3,
      productName: 'NP-700齿轮',
      drawingNumber: '70360000-01-12',
      materiaQuality: '35CrMo/42CrMo'
    },
    {
      producingId: 4,
      productName: 'NP-700齿轮',
      drawingNumber: '77009934C',
      materiaQuality: '35CrMo/42CrMo'
    },
    {
      producingId: 5,
      productName: '轴承压盖',
      drawingNumber: 'GYC25H13/GYC25H00S',
      materiaQuality: '35CrMo/42CrMo'
    }
  ]
  number: number = 10
  load() {
    this.$alert('+1')
    this.number += 10
  }

  versionList: any = [
    {
      versionId: 55,
      versionName: '01',
      createTime: '2021-11-23 10:51',
      drawingNumber: '8GCZ08020100',
      productName: '齿芯',
      materialQuality: '',
      remark: '',
      state: null,
      versionState: null,
      processList: [
        {
          sequenceId: 401,
          versionId: 55,
          sequenceNumber: 1,
          processName: '粗车',
          department: '加工',
          supplier: '',
          single: true,
          debugHour: 0.0,
          quotaHour: 11.3
        },
        {
          sequenceId: 402,
          versionId: 55,
          sequenceNumber: 2,
          processName: '精车',
          department: '加工',
          supplier: '',
          single: true,
          debugHour: 0.0,
          quotaHour: 11.3
        },
        {
          sequenceId: 403,
          versionId: 55,
          sequenceNumber: 3,
          processName: '钻孔',
          department: '加工',
          supplier: '',
          single: true,
          debugHour: 0.0,
          quotaHour: 11.3
        },
        {
          sequenceId: 404,
          versionId: 55,
          sequenceNumber: 4,
          processName: '过丝',
          department: '加工',
          supplier: '',
          single: true,
          debugHour: 0.0,
          quotaHour: 11.3
        },
        {
          sequenceId: 405,
          versionId: 55,
          sequenceNumber: 5,
          processName: '整备',
          department: '加工',
          supplier: '',
          single: true,
          debugHour: 0.0,
          quotaHour: 11.3
        },
        {
          sequenceId: 406,
          versionId: 55,
          sequenceNumber: 6,
          processName: '完工',
          department: '',
          supplier: '',
          single: true,
          debugHour: 0.0,
          quotaHour: 11.3
        }
      ]
    }
  ]
  /************************************************************************** */
  /************************************************************************** */
  /************************************************************************** */
  /************************************************************************** */
  /************************************************************************** */
  public $refs!: {
    addDialog: any
    deleteProcess: any
  }

  // 工艺版本查询条件
  queryProcessVersionFilters: any = {
    drawingNumber: '',
    page: 1,
    pageSize: 15
  }

  @vuexProcess.Action GET_PROCESS_DATEBASE: any
  @vuexProcess.Action DELETE_VERSION: any
  @vuexProcess.State versionTotalNum: any
  @vuexProcess.State sixData: any

  processManagement() {
    this.$refs.deleteProcess.open()
  }

  /**
   * 清空查询条件
   */
  clear() {
    this.queryProcessVersionFilters = {
      drawingNumber: '',
      page: 1,
      pageSize: 15
    }
    this.queryProcessVersion()
  }
  /**
   * 修改工艺版本
   * 路由跳转
   */
  editProcess(process) {
    console.log('修改工艺版本，即将跳转......')
    console.log(process)
    this.$store.commit('TwoProcess/SET_PRODUCT_ON_MODIFY_VERSION', process)
    this.$router.push({
      name: 'add-process-detail',
      params: {
        inType: '2'
      }
    })
  }

  /**
   * 删除工艺版本
   */
  delProcess(process) {
    this.$alert(`您确定删除[${process.versionName}]？`, '错误提示', {
      confirmButtonText: '确定',
      type: 'error',
      callback: action => {
        if (action === 'confirm') {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '操作提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
            .then(() => {
              this.deleteSix(process.versionId)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      }
    })
  }
  async deleteSix(versionId) {
    let result = await this.DELETE_VERSION({ versionId: versionId })
    if (result) {
      this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
    }
  }

  /*************************
   ***** 生命周期函数 *****
   *************************/
  created() {
    this.queryProcessVersion()
  }

  /**
   * 工艺版本查询
   */
  queryProcessVersion() {
    this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
  }

  createProcess() {
    // 添加工艺版本的对话框
    this.$refs.addDialog.open(false)
  }

  // 分页功能
  handleSizeChange(val) {
    this.queryProcessVersionFilters.pageSize = val
    this.queryProcessVersion()
  }
  handleCurrentChange(val) {
    this.queryProcessVersionFilters.page = val
    this.queryProcessVersion()
  }

  async sixDoubleClick(row) {
    console.log('双击查看工艺版本，即将跳转......')
    console.log(row)
    this.$store.commit('TwoProcess/SET_PRODUCT_ON_MODIFY_VERSION', row)
    this.$router.push({
      name: 'add-process-detail',
      params: {
        inType: '7'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
// 产品卡片区域
.product-cards-panel {
  padding: 20px 5px;
  height: 700px;
  overflow-y: scroll;
  scrollbar-width: none;
  .product-card {
    width: 280px;
    float: left;
    box-shadow: darkgrey 0px 0px 2px 1px;
    margin-right: 10px;
    margin-bottom: 15px;
    .card-title {
      padding-top: 10px;
      padding-left: 10px;
      font-size: 14px;
      font-family: 'STHeiti Light';
    }
    .card-content {
      font-size: 12px;
      padding-left: 10px;
      padding-bottom: 2px;
      color: #848484;
      line-height: 25px;
    }
  }
  .product-card:hover {
    cursor: pointer;
  }
}
// 工艺路线区域
.process-routes-panel {
  border: steelblue solid 1px;
}

.total {
  float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.breadcrumb {
  height: 25px;
  width: 100%;
  border: none;
}
.s1 {
  display: none;
}
.s2 {
  height: 100px;
  display: none;
}

//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.notice-item {
  height: 270px;
}

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}

.layout .operation {
  overflow-x: auto;
}
.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>